<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2023-05-18 15:53:22
 * @LastEditTime: 2024-09-12 10:48:35
 * @LastEditors: Dxcr
-->
<template>
  <div class="PipelinePopup_container" :class="bgClass">
    <div class="title">基本信息</div>
    <div class="content">
      <div class="row">管道企业：{{ info.deptName }}</div>
      <div class="row">管道名称：{{ info.pipelineName }}</div>
      <div class="row">
        <span style="cursor: pointer" @click="routerpath">
          检验名称：{{ info.checkName }}</span>
      </div>
      <div class="row">检验类型：{{ info.checkTypeDesc }}</div>
      <div class="row">检测时间：{{ info.checkTime }}</div>
      <div class="row2">
        <div class="col">发现问题项：{{ info.problemCount }}</div>
        <div class="col">完成问题项：{{ info.competeCount }}</div>
      </div>
      <div class="row2">
        <div class="col">
          发现问题报告：<span class="higtlight" @click="clickFile(info.problemFile)" :title="info.problemFile">{{ getPathName(info.problemFile) }}</span>
        </div>
      </div>
      <div class="row2">
        <div class="col">
          检测报告：<span class="higtlight" :title="info.checkFile" @click="clickFile(info.checkFile)">{{
            getPathName(info.checkFile)
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineComponent,
  ref,
  reactive,
  computed,
  toRefs,
  watch,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import Router from "@/router";

const props = defineProps({
  info: {
    type: Object,
    default: {},
  },
});
const getPathName = (path) => {
  const paths = path.split('/')
  return paths[paths.length - 1]
}
const bgClass = computed(() => {
  let ob = {};
  const fileStateDesc = props.info.fileStateDesc;
  if (fileStateDesc == "已超期") {
    ob.bg1 = true;
  } else {
    ob.bg2 = true;
  }
  return ob;
});

const getRoute = useRoute();
const router = useRouter();
const data = reactive({
  bgClass: {},
});

function routerpath() {
  const url = Router.resolve({
    path: "/integrityManagement/effectiveness-management",
    query: {
      checkName: props.info.checkName,
    },
  });
  window.open(url.href);
}

function clickFile(url) {
    //项目内地址统一使用MINIO地址
    openFile.openfile(url)
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.bg1 {
  background: url("@/assets/mapbox/images/pipelinePopup/bg1.png") !important;
}

.bg2 {
  background: url("@/assets/mapbox/images/pipelinePopup/bg2.png") !important;
}

.PipelinePopup_container {
  width: 315px;
  height: 204px;
  background: url("@/assets/mapbox/images/pipelinePopup/bg1.png");
  background-size: 100% 100%;

  .title {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
  }

  .content {
    position: absolute;
    top: 38px;
    left: 40px;
  }

  .row {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
  }

  .row2 {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
  }

  .col {
    flex: 1;
  }

  .higtlight {
    cursor: pointer;
    color: #4096ff;
    border-bottom: 1px solid #4096ff;
  }
}

:deep {}
</style>
